<template>
    <div class="dormitory-header">
        <div class="dormitory-header-logo">
            <img src="~@/assets/1.png" alt="dormitory-boot">
        </div>
        <div class="dormitory-header-user">
            <el-dropdown size="small" trigger="click" @command="handleCommand">
                <el-button size="small" plain>
                    {{userInfo.username}} <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                    <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button size="small" icon="el-icon-chat-dot-square"></el-button>
        </div>
    </div>
</template>

<script>
    import {getLoginUser, updatePassword, userLogout} from "../../../api/platform/login";
    import router from "../../../router";

    export default {
        name: "DormitoryHeader",
        data() {
            return {
                dialogLockingVisible: false,
                dialogFormVisible: false,
                userInfo: {
                    username: ""
                },
                password: {
                    oldPassWord: "",
                    newPassWord: ""
                },
            };
        },
        methods: {
            handleCommand(command) {
                console.log(command)
                if ("userInfo" == command) {
                    this.$router.push({path: '/dormitory/system/personal'})
                    this.dialogFormVisible = true;
                }
                if ("logout" == command) {
                    this.logout()
                }
            },
            getLoginUser() {
                getLoginUser().then(response => {
                    if (response.code != 200) {
                        this.$router.push({path: '/login'})
                    }
                    this.userInfo = response.data.loginUser;
                }).catch(error => {
                    this.$router.push({path: '/login'})
                    console.log(error)
                })
            },
            updatePassword() {
                updatePassword(this.password).then(response => {
                    this.dialogFormVisible = false;
                })
            },
            logout() {
                userLogout().then(response => {
                    if (response.code == 200) {
                        router.push({path: '/login'})
                    }

                }).catch(error => {
                    console.log(error)
                })
            },
        },
        created() {
            this.getLoginUser()

            //在页面加载时读取localStorage里的状态信息
            localStorage.getItem("userMsg")
            && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem("userMsg"))));

            //在页面刷新时将vuex里的信息保存到localStorage里
            window.addEventListener("beforeunload", () => {
                localStorage.setItem("userMsg", JSON.stringify(this.$store.state))
            })
        }
    }
</script>

<style scoped>
    .dormitory-header {
        width: 100%;
        height: 60px;
        border-bottom: #cccccc 1px solid;
    }

    .dormitory-header-logo {
        position: absolute;
        margin-top: 1px;
    }

    .dormitory-header-logo img {
        height: 58px;
    }

    .dormitory-header-user {
        position: absolute;
        right: 10px;
        padding-top: 15px;
    }
</style>
